<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <form>
            <fieldset>
                <legend>用户注册</legend>
                    <p>用户名：<input type="text" name="" id="" v-model="user"></p>    
                    <p>密码框：<input type="password" name="" id="" v-model="psd"></p> 
                    <p>
                        性别：
                        <input type="radio" name="" id="" value="男" v-model="sex">男
                        <input type="radio" name="" id="" value="女" v-model="sex">女
                    </p> 
                    <p>
                        爱好(多选按钮)：
                        <input type="checkbox" name="" id="" value="eat" v-model="hobby">吃
                        <input type="checkbox" name="" id="" value="play" v-model="hobby">玩
                        <input type="checkbox" name="" id="" value="sleep" v-model="hobby">睡觉
                        <input type="checkbox" name="" id="" value="sing" v-model="hobby">唱歌
                    </p> 
                    <button>提交</button> <button>重置</button>
                </fieldset>
          </form>
          <h3>填写表单内容如下：</h3>
          <p>用户名：{{user}}</p>
          <p>密码：{{psd}}</p>
          <p>性别：{{sex}}</p>
          <p>爱好(多选)：{{hobby}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#box",
            data:{
                user:"user",
                psd:"123456",
                sex:"男",
                hobby:[]
            }
        })
    </script>
</body>
</html>